import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
import { Router } from '@angular/router';
import { LayoutMenu } from '../../layout/layout.model';

@Component({
  selector: 'app-tab',
  templateUrl: './tab.component.html',
  styleUrls: ['./tab.component.less'],
})
export class TabComponent implements OnInit {
  @Input() tabs: LayoutMenu[];
  @Input() currentIndex: number;
  selectIndex: number | null = null; // 当前选择tab的Index
  currentTab: LayoutMenu | null = null; // 当前展示的tab
  isShowContent = false; // 控制内容是否渲染

  constructor(private router: Router) {}

  ngOnInit(): void {
   
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (
      changes.currentIndex &&
      changes.currentIndex.currentValue !== null &&
      this.tabs.length
    ) {
      this.selcet(changes.currentIndex.currentValue);
    }
  }

  selcet(i: number) {
    this.isShowContent = false;
    setTimeout(() => {
      if (
        (!this.currentTab && location.href !== this.tabs[i].link) ||
        this.currentTab?.link !== this.tabs[i].link
      ) {
        this.router.navigate([this.tabs[i].link]);
      }
      this.selectIndex = i;
      this.currentTab = { ...this.tabs[i] };
      this.isShowContent = true;
    });
  }

  loadStatus(ev: CustomEvent) {
    // if (ev.detail.status === AppStatus.MOUNTED) {
    // }
  }
}
